<template>
  <div class="lyric-wrapper" :class="currentClass">
    <div class="lyric-top">
      <div
        class="img-wrapper"
        :class="isPlaying ? 'playing' : 'paused'"
        @click="changePlayState"
      >
        <img
          src="http://p4.music.126.net/W2o9BIfqO8zEw62sGcotvw==/109951165325285624.jpg?param=400y400"
          alt
          class="music-image"
        />
        <div class="hand-wrapper">
          <img
            src=""
            alt
            class="hand-icon"
          />
          <img
            src="https://ssh-music.vercel.app/img/play-bar.e5a7a142.png"
            class="bar-icon"
            alt
          />
        </div>
      </div>
      <div class="text-wrapper">
        <div class="lyric-text">
          <ul class="content">
            <li
              v-for="(item, index) of lyric"
              :key="index"
              :class="currentLyricIndex === index ? 'active' : ''"
              class="lyric-item"
              ref="lyricItems"
            >
              <p v-for="(con, index) of item.content.split('__')" :key="index">
                {{ con }}
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import BetterScroll from "better-scroll";
import { fetchLyric } from "../api";

export default {
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isPlaying: false,

      scroller: null,

      lyric: [],
      tlyric: [],
      currentIndex: 0,

      diffIndex: 4,
    };
  },
  mounted() {},
  computed: {
    ...mapState(["currentTime", "currentSong"]),
    currentClass() {
      return this.isShow ? "show" : "hide";
      // return "show";
    },
    currentLyricIndex() {
      const index = this.lyric.findIndex((item, index) => {
        const nextItem = this.lyric[index + 1];
        if (nextItem) {
          return (
            this.currentTime >= item.time && this.currentTime <= nextItem.time
          );
        } else {
          return this.currentTime >= item.time;
        }
      });
      return index;
    },
  },
  watch: {
    currentLyricIndex(newVal, oldVal) {
      console.log(newVal, oldVal);
      this.$nextTick(() => {
        const lyricItemNode = this.$refs.lyricItems[newVal + this.diffIndex];
        if (lyricItemNode) {
          lyricItemNode.scrollIntoView({
            behavior: "smooth",
            block: "end",
            inline: "nearest",
          });
        }
      });
    },
    currentSong(newSong, oldSong) {
      if (newSong.id !== oldSong.id) {
        this.init();
      }
    },
  },
  methods: {
    async init() {
      await this.getLyric();

      this.$nextTick(() => {
        if (this.scroller) {
          this.scroller.refresh();
        } else {
          this.scroller = new BetterScroll(".lyric-text", {
            mouseWheel: true,
            scrollY: true,
            scrollbar: true,
            probeType: 3,
            disableTouch: true,
          });
        }
      });
    },
    changePlayState() {
      this.isPlaying = !this.isPlaying;
    },
    async getLyric() {
      const res = await fetchLyric({ id: this.currentSong.id }); // 1480280185

      this.lyric = this.parseLyric(res.lrc.lyric);
      this.tlyric = this.parseLyric(res.tlyric.lyric);

      if (this.tlyric.length) {
        this.diffIndex = 2;
        this.lyric.forEach((item) => {
          const { time } = item;
          const tCurrent = this.tlyric.find((tItem) => tItem.time === time);
          if (tCurrent) {
            item.content += "__" + tCurrent.content;
          }
        });
      }
    },
    // transformLyric(lyric, tlyric) {
    //   const lyricLen = lyric.length;
    //   const tlyricLen = tlyric.length;
    //   if (lyricLen && tlyricLen) {
    //     const target = lyricLen < tlyricLen ? tlyric : lyric;
    //   }
    // },
    parseLyric(lyricStr) {
      // 分割换行符
      const lyricArr = lyricStr.split("\n");

      const result = [];
      const reg = /\[(\S+)\]/;

      lyricArr.forEach((item) => {
        let content = item.replace(reg, "").trim();
        let timeStr = item.match(reg)[1];

        const [minute, second] = timeStr.split(":");
        const time = minute * 60 + Number(second);

        result.push({ time, content });
      });

      // console.log(lyricArr);
      console.log(result);

      return result;
    },
  },
};
</script>

<style lang='less' scoped>
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.lyric-wrapper {
  position: fixed;
  z-index: 1;
  top: 50px;
  left: 0;
  bottom: 60px;
  width: 100%;
  background-color: #eee;

  transition: transform 0.5s;

  &.show {
    transform: translateY(10%);
  }
  &.hide {
    transform: translateY(220%);
  }

  .lyric-top {
    padding: 0 80px;
    display: flex;
    justify-content: space-between;

    .img-wrapper {
      position: relative;
      width: 300px;
      padding-top: 80px;

      &.playing {
        .bar-icon {
          transform: rotate(0deg);
        }

        .music-image {
          animation-play-state: running;
        }
      }

      .hand-wrapper {
        position: absolute;
        top: -10px;
        left: 50%;
        width: 30px;
        height: 30px;
        transform: translateX(-50%);
      }
      .hand-icon {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
      }

      .bar-icon {
        position: absolute;
        z-index: 1;
        top: 15px;
        left: 10px;
        width: 100px;

        transform: rotate(-30deg);
        transform-origin: 0 0;
        transition: transform 0.3s;
      }

      .music-image {
        display: block;
        width: 300px;
        height: 300px;
        border-radius: 50%;

        animation: rotate linear infinite 15s;
        animation-play-state: paused;
      }
    }

    .text-wrapper {
      width: 300px;
      height: 300px;
    }
  }

  .lyric-text {
    position: relative;
    width: 100%;
    height: 300px;
    margin-top: 60px;
    overflow: hidden;

    mask-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.6) 15%,
      #fff 25%,
      #fff 75%,
      rgba(255, 255, 255, 0.6) 85%,
      rgba(255, 255, 255, 0)
    );

    .lyric-item {
      padding-bottom: 18px;
      font-size: 13px;
      color: #666;

      &.active {
        font-weight: bold;
        color: red;
        font-size: 15px;
      }

      > p {
        padding-bottom: 5px;
      }
    }
  }
}
</style>